<script setup>
	import {ref} from "vue";
	import { SYSTEM_Window_INFO,MENU_BUTTON_RECT_INFO } from '../../utils/config'; 
	import {useNavBarStyle} from "@/utils/system.js"
	const {headHeight}=useNavBarStyle();
	// "@/utils/config.js"
	console.log(MENU_BUTTON_RECT_INFO);
	const menuList=ref([
		{label:"我的积分",icon:"icon-jifen",color:"#FF9900",bg1:"#FADAD2",bg2:"#FFF6F5"},
		{label:"购物商城",icon:"icon-caigou",color:"#EF807A",bg1:"#FADAD2",bg2:"#FFF6F5"},
		{label:"商家地图",icon:"icon-dianpu1",color:"#79AA9C",bg1:"#D3F2EE",bg2:"#EDF7F7"},
		{label:"我要合作",icon:"icon-hezuoguanxi",color:"#45C2D3",bg1:"#A4F2FD",bg2:"#ECFBFD"}
	])
</script>

<template>
	<view class="page-wrap">
		<!-- mod-nav-bar中的defineProps() -->
		<mod-nav-bar title="首页" title-color="#fff"></mod-nav-bar>
		商城项目
		<mode-search></mode-search>
		<view class="page-content">
			<view class="banner">
				<!-- 加上衔接和指示点、知识点选中的颜色 自动轮播-->
				<swiper class="swiper" circular autoplay interval="3000"
				indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="rgba(255,255,255,1)">
					<swiper-item class="swiper-item">
						<image class="image" src="/static/tmp_banner1.png" mode="aspectFill"></image>
					</swiper-item>
					<swiper-item class="swiper-item">
						<image class="image" src="/static/tmp_banner2.jpg" mode="aspectFill"></image>
					</swiper-item>
				</swiper>	
			</view>
			
			<view class="notice">
				<scroll-notice></scroll-notice>
				
			</view>
			<!-- incnfont -->
			<view class="home-menu">
				<view class="item" v-for="item in menuList" :key="item.label">
					<view class="icon" :style="{background: `linear-gradient(to bottom, ${item.bg1}, ${item.bg2})`}">
						<text class="iconfont" :class="item.icon" :style="{color: item.color}"></text>
					</view>
					<view class="label" :style="{color: item.color}">{{item.label}}</view>
				</view>
			</view>
			<!-- 抽奖照片 -->
			<view class="prize">
			    <image class="image" src="/static/home_xydcj.png"/>
			</view>
			
			
			<view class="hot">
				<view class="page-title">
					<view class="left">
						<view class="line"></view>
						<view class="name">热销产品</view>
					</view>
					<view class="right">
						<view class="more">查看更多</view>
						<view class="icon">
							<uni-icons type="right" size="28rpx" color="#A6A6A6"></uni-icons>
						</view>
					</view>
				</view>
				
				<view class="hot-content">
					<view class="list">
						<view class="item" v-for="item,index in 6" :key="index">
							<card-goods></card-goods>
						</view>
					</view>
					
				</view>
			</view>

		</view>
		<!-- 占位50个 -->
		<view v-for="item in 50">{{item}}</view>
	</view>
</template>

<style lang="scss" scoped>
	.page-wrap{
				.page-content{
			padding: 20rpx 32rpx;width: 100%;border:1rpx solid red;
			&::before{
				content: "";display: block;width: 984rpx;height: 522rpx;border-radius: 50%;
				background-color: $uni-color-primary;position: absolute;
				left:calc(50% - 492rpx);top:calc(-150rpx);
			}
			.banner{width: 100%;.swiper{width: 100%;&-item{
				width: 100%;border:1rpx solid red;
				border-radius: 30rpx;overflow: hidden;
				.image{width:100%;height: 100%;}
			}

		}}
		.notice{
			padding: 40rpx 0;
		}
		.home-menu{
			padding: 40rpx 0;display: grid;grid-template-columns: repeat(4,1fr);gap: 20rpx;
				.item{
					display: flex;flex-direction: column;align-items: center;justify-content: center;
					.icon{
						// background:linear-gradient(to bottom,red,green);渐变色
						width:140rpx;height: 140rpx;display: flex;
						align-items: center;justify-content: center;border-radius:50%;
					.iconfont{font-size: 80rpx;}
				}
			}
			.label{font-size: 32rpx;text-align: center;padding-top: 15rpx;}
		}
		.prize{
			width: 100%;margin:20rpx 0;
			.image{width: 686rpx;height: 185rpx;display: block;}
		}
		.page-title{
			display: flex;align-items: center;justify-content: space-between;
			.left{
				display: flex;align-items: center;gap:10rpx;
				// 竖线
				.line{width: 8rpx;height: 32rpx;background:$uni-color-primary;border-radius: 6rpx;}
				.name{font-size: 36rpx;font-weight: bolder;color: $uni-color-primary;}
			}
			.right{
				display: flex;align-items: center;gap:5rpx;
				// “更多”文字
				.more{font-size: 24rpx;color:#a6a6a6;}
			}
		}
		.hot{
			padding:30rpx 0;
			&-content{
				margin-top: 30rpx;
				.list{
					display: grid;
					// 网格分配最大最小值
					grid-template-columns: repeat(2 , minmax(0,1fr));
					gap:30rpx;.item{}
				}
			}}
	}
}

</style>
